<template>
  <view class="page-business">
    <view class="b-w inner">
      <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
        <u-form-item label="标题" prop="title" labelWidth="50" borderBottom ref="item1">
          <u--input
            v-model="formData.title"
            maxlength="50"
            border="none"
            placeholder="请输入标题"
          ></u--input>
        </u-form-item>
        <u-form-item label="封面" labelWidth="50" prop="cover" borderBottom ref="item1">
          <view @click="handleUploadImg">
            <u-upload
              disabled
              name="1"
              @delete="deletePic"
              :fileList="formData.cover"
              :maxCount="1"
            ></u-upload>
          </view>
        </u-form-item>
        <u-form-item label="内容" labelWidth="50" prop="content" ref="item1">
          <u--textarea
            v-model="formData.content"
            placeholder="请输入内容"
            maxlength="2000"
            count
            autoHeight
          ></u--textarea>
        </u-form-item>
      </u--form>
      <view class="confirm-btn" @click="handleSubmit">
        <u-button type="primary" text="提交"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import UpLoadImg from '@/ext/upLoadImg.js'
export default {
  data() {
    return {
      formData: {
        title: '',
        cover: [],
        content: '',
      },
      rules: {
        title: {
          type: 'string',
          required: true,
          message: '请填写标题',
          trigger: ['blur', 'change'],
        },
        cover: {
          validator: (rule, value, callback) => {
            return value.length ? true : false
          },
          message: '请上传封面',
          trigger: ['blur', 'change'],
        },
        content: {
          type: 'string',
          required: true,
          message: '请填写公告内容',
          trigger: ['blur', 'change'],
        },
      },
    }
  },
  onLoad() {
    this.UpLoadImg = new UpLoadImg()
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    handleUploadImg() {
      this.UpLoadImg.getOssToken().then((res) => {
        this.formData.cover = [
          {
            url: res.fileName,
            status: 'success',
          },
        ]
      })
    },
    handleSubmit() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          const formData = this.$utils.deepCopy(this.formData)
          formData.cover = formData.cover[0].url
          this.$request('/notice/notice', formData).then((res) => {
            this.$utils.toast('发布成功')
            setTimeout(() => {
              uni.navigateBack({})
            }, 1500)
          })
        })
        .catch((errors) => {
          uni.$u.toast('请填写完整')
        })
    },
    deletePic() {
      this.formData.cover = []
    },
  },
}
</script>

<style scoped lang="scss">
.confirm-btn {
  margin-top: 20rpx;
}
.page-business {
  padding: 20rpx;
  .inner {
    border-radius: 10rpx;
    padding: 20rpx;
    .header-my {
      border-bottom: 1rpx solid #c8c7cc;
      padding-bottom: 20rpx;
      .title {
      }
    }
  }
}
</style>
